<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>

    <style>
        html, body, h1 {
            margin: 0;
        }
        #app {
            margin: 5px;
            height: 600px;
        }
        .nav {
            background-color: aquamarine;
            width: 100%;
            height: 80px;
        }
        .container {
            display: flex;
            height: 100%;
            width: 100%;
        }
        .left {
            background-color: antiquewhite;
            height: 100%;
            flex: 2;
        }
        .main {
            background-color: burlywood;
            height: 100%;
            flex: 8;
        }
    </style>

</head>
<body>

<div id="app">
    <!--默认路由视图-->
    <router-view></router-view>
    <div class="container">
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
    </div>
</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>

    let nav = {
        template: '<h1 class="nav">nav</h1>'
    };

    let left  = {
        template: '<h1 class="left">menu</h1>',
    };

    let main  = {
        template: '<h1 class="main">main</h1>',
    };

    let router = new VueRouter({
        routes: [
            {
                path: '/',
                components: {
                    'default': nav,
                    'left': left,
                    'main': main
                }
            },
        ]
    });

    let vm = new Vue({
        el: "#app",
        data: {
        },
        router
    })

</script>
</body>
</html>
